<template>
  <div>
    <el-card class="box-card" shadow="hover">
      <el-container style="border: 1px solid #eee">
        <el-header style="background-color: #20A0FF">
          <h3 style="color: white">面试日历</h3>
        </el-header>
        <el-main>
          <el-calendar v-model="datevalue" :first-day-of-week="7">
            <div
              slot="dateCell"
              slot-scope="{ data }"
              @click="getdatedetail(data)"
            >
              <p :class="data.isSelected ? 'is-selected' : ''">
                {{ data.day.split("-").slice(2).join("-") }}
              </p>
              <div
                style="width: 100%"
                v-for="(item, index) in scheduleData"
                :key="index"
              >
                <div v-if="item.datadate.indexOf(data.day) != -1">
                  <el-tag
                    style="margin-left: 5px"
                    size="mini"
                    v-for="(content, index) in item
                      ? item.content.slice(0, 5)
                      : item.content"
                    :key="index"
                    >{{ content.name }}</el-tag
                  >
                </div>
              </div>
            </div>
          </el-calendar>
        </el-main>
      </el-container>
    </el-card>

    <el-drawer title="面试人员信息" :visible.sync="detail" :with-header="false">
      <el-container>
        <el-main>
          <el-card
            class="box-card"
            style="margin-top: 5px"
            v-for="(item, index) in userinfo"
            :key="index"
          >
            <div slot="header" class="clearfix">
              <span style="font-weight: bold">{{ item.name }}</span>
            </div>
            <el-form label-position="top">
              <el-form-item style="margin-top: -10px">
                <span>应聘部门：{{ item.department }}</span>
              </el-form-item>
              <el-form-item style="margin-top: -10px">
                <span>手机：{{ item.phone }}</span>
              </el-form-item>
              <el-form-item style="margin-top: -10px">
                <span>面试日期：{{ item.date }}</span>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  style="width: 100%"
                  @click="getdetail(item)"
                  >操作</el-button
                >
              </el-form-item>
            </el-form>
          </el-card>
        </el-main>
      </el-container>
    </el-drawer>

    <!-- 人员信息卡-->
  </div>
</template>

<script>
export default {
  created() {
    this.getdata();
  },

  data() {
    return {
      datevalue: new Date(),
      detail: false,
      drawermark: true,
      scheduleData: [],
      userinfo: [],
    };
  },

  methods: {
 

    getdata() {
      this.$axios
        .post("api/interview/getinterviewerbydate")
        .then((response) => {
          this.scheduleData = response.data;
          console.log(this.scheduleData)
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    getdetail(row) {
      this.$bus.$emit("getInterview", row);
    },

    getdatedetail(date) {
      let datas = {
        interviewdate: date.day,
      };
      this.$axios
        .post("api/interview/getinterviewerdetail", datas)
        .then((response) => {
          this.userinfo = response.data;
          if (response.data.length != 0) {
            this.detail = true;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>

<style>
.is-selected {
  color: #1989fa;
}

p {
  margin: 10px auto;
}

ul {
  list-style: none;
  padding: 0;
}
.el-calendar-table thead th:before {
  content: "星期";
}

.el-calendar-table .el-calendar-day {
  height: auto;
}

.el-calendar-table .el-calendar-day:hover {
  background-color: #ffffff;
}

.el-calendar-table tr td:last-child {
  background-color: #f9f8fe;
}

.el-calendar-table tr td:first-child {
  background-color: #f9f8fe;
}
</style>